<template>
  <div>
    <z-table
      :url="useUserListApi"
      :columns="state.columns"
      :rowKey="'userId'"
      noCheck
    >
      <template #avatar="{ record }">
        <a-avatar :image-url="record.avatar"></a-avatar>
      </template>

      <template #actions_left="row">
        <a-button type="outline" @click="handleClick">左插槽</a-button>
      </template>

      <template #actions_right="row">
        <a-button type="outline" @click="ces">右插槽</a-button>
      </template>
    </z-table>

    <a-modal title="新增用户" v-model:visible="visible" @ok="ces">
      <a-form :model="formData">
        <a-form-item
          v-for="row in formList"
          :label="row.label"
          :field="row.field"
          :rules="row.rules"
        >
          {{ row.field }}
          <template v-if="row.type === 'input'">
            <a-input v-model="formData[row.field]"></a-input>
          </template>
          <!-- <template #help>
            <slot :name="`${row.field}_help`" v-bind="row"></slot>
          </template> -->
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import ZTable from "@/components/admin/z-table.vue";
import { useUserListApi } from "@/api/index";
import type { ColumnType } from "@/types/common";
import { valid } from "mockjs";

const formData = reactive<Object>({});

const visible = ref(false);

const state = reactive({
  columns: [
    {
      title: "用户名",
      dataIndex: "userName",
    },
    {
      title: "昵称",
      dataIndex: "nickName",
    },
    {
      title: "邮箱",
      dataIndex: "email",
    },
    {
      title: "头像",
      slotName: "avatar",
    },
    {
      title: "时间",
      // slotName: "created_at",
      slotName: "current",
      format: "HH:mm:ss",
    },
    {
      title: "操作",
      slotName: "actions",
    },
  ] as ColumnType[],
});

const ces = () => {
  console.log(formData, "12321");
};

const formList = [
  {
    label: "昵称",
    field: "nickName",
    type: "input",
    rules: [{ required: true }],
    validateTrigger: "blur",
  },
  {
    label: "邮箱",
    field: "email",
    type: "input",
    rules: [{ required: true }],
    validateTrigger: "blur",
  },
];

const handleClick = () => {
  visible.value = true;
};
</script>
<style scoped lang="less"></style>
